<template>
  <footer id="Footer">
    <div class='bottom_center'>
      <el-icon class="el-icon-loading" style="float: left"></el-icon>
      <div v-show="this.route.path === '/'">
        <span class='fS_10 darkgray'> © {{ year }} </span>
        <a class='bottom_center_record' target='_blank' :href='web_href'>
          <span style="font-size: 11px;">{{ web_name }}</span></a>
        <a class='bottom_center_record pl_5 canCopy' target='_blank' @click="toFilings(filings_href,'皖ICP备'+ICP_id)">
          皖ICP备{{ ICP_id }}</a>
        <a class='bottom_center_record pl_5' target='_blank' :href='filingsGA_href + GA_id'>
          皖公网安备{{ GA_id }}</a>
      </div>
      <div class='' v-show="footerShow">
        <img ref='tie_email' @click='tie("email")' class='bottom_right tie_img'
             src='src/assets/qrcode/codeworld_email.png'
             :title=email_num alt='email'/>
        <img ref='tie_wx' @click='tie("wx")' class='bottom_right tie_img' src='src/assets/qrcode/codeworld_wx.png'
             :title=wx_num alt='wx'/>
        <img ref='tie_qq' @click='tie("qq")' class='bottom_right tie_img' src='src/assets/qrcode/codeworld_qq.png'
             :title=qq_num alt='qq'/>
        <a target='_blank' class='bottom_right mr_20' :href='qq_href'>
          <p @mouseenter='hover_tie("tie_qq")' @mouseleave='hover_tie("out")' :title=qq_num>
            QQ </p></a>
        <a target='_blank' class='bottom_right mr_60' :href='wx_href'>
          <p @mouseenter='hover_tie("tie_wx")' @mouseleave='hover_tie("out")' :title=wx_num>
            WX </p></a>
        <a target='_blank' class='bottom_right mr_100' :href='email_href'>
          <p @mouseenter='hover_tie("tie_email")' @mouseleave='hover_tie("out")' :title=email_num>
            EMAIL </p></a>
      </div>
    </div>
  </footer>
</template>

<script>
import '../../assets/css/WebShow.css';

export default {
  name: 'Footer',
  data() {
    return {
      route: this.$route,
      //'2023-' +
      year: new Date().getFullYear(),
      web_name: 'codeworld.fun',
      web_href: 'http://codeworld.fun',
      ICP_id: '2022002331号-1',
      GA_id: '34170202000496',
      filings_href: 'https://beian.miit.gov.cn',
      filingsGA_href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=', //domainname=
      footerShow: true,
      email_href: 'https://mail.qq.com/',
      wx_href: 'https://wx.qq.com',
      qq_href: 'https://jq.qq.com/?_wv=1027&k=oSuNIG6O',
      email_num: 'c-j.s@qq.com',
      wx_num: 'codeworld',
      qq_num: '490101532',

    };
  },
  created() {
  },
  mounted() {
    //监听鼠标滚动事件
    if (this.route.path !== "/") {
      this.footerShow = false;
      window.addEventListener('mousewheel', this.footerShows);
    }
  },
  methods: {
    footerShows(e) {
      //e.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。
      //火狐浏览器不支持这个方法，需要会用e.detail来获取滚轮的滚动方向，向上是负值，向下是正值
      //let direction = e.deltaY > 0 ? 'down' : 'up';  //deltaY为正则滚轮向下，为负滚轮向上
      //125为用户一次滚动鼠标的wheelDelta的值,125与鼠标滚动一下是几行的不同而不同
      this.footerShow = e.deltaY > 0
    },
    toFilings(url, id) {
      this.$clipboard(id);
      this.$message.success(id + ' 已复制到剪贴板');
      setTimeout(() => window.open(url, '_blank'), 1000);
    },
    hover_tie(e) {
      //console.log(e);
      if (e === 'out') {
        let that = this
        this.tieOutTimer = setTimeout(function () {
          that.$refs.tie_wx.style.display = 'none';
          that.$refs.tie_qq.style.display = 'none';
          that.$refs.tie_email.style.display = 'none';
        }, 3000);
      } else {
        if (e === 'tie_wx') {
          this.$refs.tie_wx.style.display = 'inline';
          this.$refs.tie_qq.style.display = 'none';
          this.$refs.tie_email.style.display = 'none';
        } else if (e === 'tie_qq') {
          this.$refs.tie_wx.style.display = 'none';
          this.$refs.tie_qq.style.display = 'inline';
          this.$refs.tie_email.style.display = 'none';
        } else if (e === 'tie_email') {
          this.$refs.tie_qq.style.display = 'none';
          this.$refs.tie_wx.style.display = 'none';
          this.$refs.tie_email.style.display = 'inline';
        }
      }
    },
    tie(e) {
      if (e === 'wx') {
        e = this.wx_href;
        this.$refs.tie_wx.style.display = 'none';
      } else if (e === 'qq') {
        e = this.qq_href;
        this.$refs.tie_qq.style.display = 'none';
      } else if (e === 'email') {
        e = this.qq_href;
        this.$refs.tie_email.style.display = 'none';
      }
      window.open(e);
    }
  }
}
;
</script>
<style>
#Footer {
  opacity: 0.7;
}

.canCopy {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
</style>

